<template>
	<div class="deviceOEE picking zy-content">
		<div class="searchBox search-box-layout">
			<Row :gutter="24">
				<Col span="6">
					<div>
						<p class="label">{{ $t('equipmentscrapped.Location') }}</p>
						<div class="ipt">
							<Cascader
								clearable
								:data="orgList"
								v-model="searchParams.orgCode"
								:placeholder="$t('common.PleaseSelect')"
								@on-change="workShopChange"
								change-on-select
							></Cascader>
						</div>
					</div>
				</Col>
				<Col span="4">
					<div>
						<p class="label">{{ $t('equipCheck.SerialNo') }}</p>
						<div class="ipt">
							<Select
								v-model="searchParams.deviceMId"
								filterable
								clearable
								:placeholder="`${$t('common.selectInfo')}${$t('equipCheck.SerialNo')}`"
								:remote-method="remoteMethodDeviceMId"
							>
								<Option v-for="item of devNoList" :value="item.deviceMId" :key="item.deviceMId" :label="item.deviceMId + '-' + item.deviceName">
								</Option>
							</Select>
						</div>
					</div>
				</Col>
				<Col span="4">
					<div>
						<p class="label">{{ $t('equipmentscrapped.AssetNo') }}</p>
						<div class="ipt">
							<Select
								v-model="searchParams.assetCode"
								filterable
								clearable
								:placeholder="`${$t('common.selectInfo')}${$t('equipmentscrapped.AssetNo')}`"
								:remote-method="remoteMethodassetCode"
							>
								<Option v-for="item of devNoList" :value="item.assetCode" :key="item.assetCode" :label="item.assetCode + '-' + item.deviceName">
								</Option>
							</Select>
						</div>
					</div>
				</Col>
				<Col span="4">
					<div>
						<p class="label">{{ $t('equipmentscrapped.EquipmentNo') }}</p>
						<div class="ipt">
							<Select
								v-model="searchParams.deviceNo"
								filterable
								label-in-value
								clearable
								:remote-method="searchDevice"
								:placeholder="$t('maintenance.EquipmentNo')"
							>
								<Option v-for="(item, index) of deviceList" :value="item.deviceNo" :key="index" :label="item.deviceNo + '-' + item.deviceName">
								</Option>
							</Select>
						</div>
					</div>
				</Col>
				<Col span="4">
					<div>
						<p class="label">{{ $t('SystemConfig.shift') }}</p>
						<div class="ipt">
							<Select v-model="searchParams.shift" clearable :placeholder="`${$t('common.selectInfo')}${$t('SystemConfig.shift')}`">
								<Option v-for="(item, index) of productionShiftList" :value="item.shift" :label="item.shift" :key="index"> </Option>
							</Select>
						</div>
					</div>
				</Col>
				<Col span="6">
					<div>
						<p class="label">{{ $t('common.Date') }}</p>
						<div class="ipt">
							<DatePicker
								type="daterange"
								v-model="timeList"
								split-panels
								placement="bottom"
								transfer
								:placeholder="`${$t('common.selectInfo')}${$t('common.Date')}`"
								:clearable="false"
							>
							</DatePicker>
						</div>
					</div>
				</Col>
				<Col span="4">
					<div>
						<p class="label">设备类别</p>
						<div class="ipt">
							<Select
								v-model="searchParams.deviceCategory"
								filterable
								clearable
								:placeholder="`${$t('common.selectInfo')}设备类别`"
							>
								<Option v-for="val in deviceType" :value="val.value" :key="val" :label="val.value"></Option>
							</Select>
						</div>
					</div>
				</Col>
				<Col span="5">
					<div class="t-c">
						<p class="label hide-label">--</p>
						<div class="ipt">
							<Button type="primary" class="search-btn" @click="changeNum()">{{ $t('common.Query') }} </Button>
							<Button class="reset-btn" @click="search()">{{ $t('common.reset') }} </Button>
						</div>
					</div>
				</Col>
			</Row>
		</div>
		<div class="list-layout" style="margin-top: 16px">
			<div class="btns clear">
				<span class="title">{{ $t('实时OEE') }}</span>
			</div>
			<Row>
				<Col span="6">
					<div>
						<Row>
							<Col span="24" align="center">
								<div class="oeeRate" id="oee1"></div>
							</Col>
						</Row>
					</div>
				</Col>
				<Col span="18">
					<Row>
						<Col span="8">
							<div>
								<div class="oeeMReate" id="mrate1"></div>
								<div class="oeeMReate" id="mrate2"></div>
								<div class="oeeMReate" id="mrate3"></div>
							</div>
						</Col>
						<Col span="16">
							<div>
								<div class="oeeLine" id="mLinee1"></div>
								<div class="oeeLine" id="mLinee2"></div>
								<div class="oeeLine" id="mLinee3"></div>
							</div>
						</Col>
					</Row>
				</Col>
			</Row>
		</div>
	</div>
</template>

<script>
import * as echarts from 'echarts';
import { getDictData } from '@/api/index.js';
import recursion from '@/util/recursion';
import { getDeviceListinfo } from '@/api/maintenance';
import { setRateChart, setLineChart, setLineRate } from '@/views/productManage/setChart';
export default {
	name: 'deviceTrend',
	data() {
		return {
			deviceList: [],
			productionShiftList: [],
			timeList: [this.$moment(new Date()).subtract(7, 'days').format('YYYY-MM-DD'), this.$moment(new Date()).format('YYYY-MM-DD')],
			hierarchyList: [],
			searchParams: {},
			devList: [],
			oeeNum: {
				a: 0,
				nee: 0,
				oee: 0,
				p: 0,
				q: 0,
				u: 0,
			},
			devNoList: [],
			helpShowF: false,
			addtitle: '',
			chartType: '',
			chartParams: {},
			orgList: [],
		};
	},
	mounted() {
		getDictData('设备类别').then((res) => {
			this.deviceType = res.data;
		});
		this.getHierarchy();
		this.changeNum();
		this.getOrgList();
	},
	methods: {
		workShopChange(val) {
			let workShop = '';
			if (val && val.length) {
				workShop = val.at(-1);
			} else {
				this.productionShiftList = [];
				this.searchParams.shiftId = '';
				return;
			}
			this.axios({
				method: 'get',
				url: '/dms/oee-board/selectShiftByWorkShop',
				params: { workShop },
			}).then((res) => {
				if (res.code === 200) {
					this.productionShiftList = res.data;
				}
			});
		},
		getOrgList() {
			this.axios({
				method: 'get',
				url: '/basic/organization/findListByToken',
				params: { level: 1 },
			}).then((res) => {
				if (res.code === 200) {
					const obj = {
						label: 'name',
						value: 'code',
						children: 'children',
					};
					this.orgList = recursion.convertTree(res.data, obj);
				} else {
					this.$Message.warning({ content: res.msg, duration: 6, closable: true });
				}
			});
		},
		onCartSelect(chart, type) {
			chart.on('click', (prams) => {
				this.chartParams.type = type;
				this.chartParams.day = prams.name;
				this.$refs.kpiDetailModel.show(this.chartParams);
			});
		},
		searchDevice(query) {
			this.axios({
				method: 'get',
				url: '/dms/dmsDevice/deviceListByParams',
				params: {
					orgCode: Array.isArray(this.searchParams.orgCode) && this.searchParams.orgCode.length > 0 ? this.searchParams.orgCode.at(-1) : '',
					param: query,
				},
			}).then((res) => {
				if (res.code === 200) {
					this.deviceList = res.data;
				}
			});
		},
		nodeTemplate(data) {
			console.log(data);
		},
		helpModal(type, form) {
			if (form == 1) {
				this.$refs.oeeHelpOrgChart.show(type);
			}
			// this.helpShowF = true
		},
		remoteMethodassetCode(query) {
			if (query) {
				this.getassetCode(query);
			}
		},
		async getassetCode(item) {
			let param = {
				pageSize: 200,
				assetCode: item,
				pageNum: 1,
				// orgCode: "",
			};
			let { data, code } = await getDeviceListinfo(param);
			if (code === 200) {
				this.devNoList = data.records;
			}
		},
		remoteMethodDeviceMId(query) {
			if (query) {
				this.getDeviceMId(query);
			}
		},
		async getDeviceMId(item) {
			let param = {
				pageSize: 200,
				deviceMId: item,
				pageNum: 1,
				// orgCode: "",
			};
			let { data, code, msg } = await getDeviceListinfo(param);
			if (code === 200) {
				this.devNoList = data.records;
			}
		},
		search() {
			this.searchParams = {};
			(this.timeList = [this.$moment(new Date()).subtract(7, 'days').format('YYYY-MM-DD'), this.$moment(new Date()).format('YYYY-MM-DD')]),
				this.changeNum();
		},
		changeNum() {
			let params = JSON.parse(JSON.stringify(this.searchParams));

			// params.startTime = this.$moment(this.timeList[0]).format('YYYY-MM-DD')
			// params.endTime = this.$moment(this.timeList[1]).format('YYYY-MM-DD')

			if (this.timeList[1] && (this.$moment(this.timeList[1]) - this.$moment(this.timeList[0])) / (24 * 3600 * 1000) <= 7) {
				params.startTime = this.$moment(this.timeList[0]).format('YYYY-MM-DD');
				params.endTime = this.$moment(this.timeList[1]).format('YYYY-MM-DD');
			} else {
				this.$Message.warning({ content: '日期间隔不能超过7天', duration: 6, closable: true });
				return false;
			}
			if (this.searchParams.orgCode && this.searchParams.orgCode.length) {
				params.workShop = this.searchParams.orgCode.at(-1);
			}
			delete params.orgCode;
			// params.orgCode = (Array.isArray(this.searchParams.orgCode) && this.searchParams.orgCode.length > 0) ? this.searchParams.orgCode.at(-1) : ""
			this.chartParams = params;
			this.getTrendChartInstrument(params);
			this.getLineChart(params);
		},
		getLineChart(params) {
			this.axios({
				method: 'post',
				url: '/dms/oee-board/performanceChartTimeCropMovement',
				data: { ...params },
			}).then((res) => {
				if (res.code == 200) {
					this.$nextTick(() => {
						this.getTrendCharPassRate(res.data);
						this.getTrendCharPerformanceCropMovement(res.data);
						this.getTrendCharTimeCropMovement(res.data);
					});
				}
			});
		},
		getTrendChartInstrument(params) {
			this.axios({
				method: 'post',
				url: '/dms/oee-board/performanceChartInstrument',
				data: { ...params },
			}).then((res) => {
				if (res.code == 200) {
					const { performanceCropMovement, passRate, oee, timeCropMovement } = res.data;
					setRateChart('oee1', 'OEE', oee);
					setLineRate('mrate1', this.$t('时间稼动率A'), timeCropMovement, 'rgb(59,161,255)');
					setLineRate('mrate2', this.$t('性能稼动率P'), performanceCropMovement, 'rgb(106,211,137)');
					setLineRate('mrate3', this.$t('良品率'), passRate, 'rgb(252,219,86)');
				}else{
					this.$Message.warning({ content: res.msg, duration: 6, closable: true });
				}
			});
		},
		getTrendCharPassRate(data) {
			let xData = data.map((item) => item.days);
			let yData = data.map((item) => item.passRate);
			this.$nextTick(() => {
				setLineChart('mLinee3', this.$t('良品率'), xData, yData);
			});
		},
		getTrendCharPerformanceCropMovement(data) {
			let xData = data.map((item) => item.days);
			let yData = data.map((item) => item.performanceCropMovement);
			setLineChart('mLinee2', this.$t('性能开动率P'), xData, yData);
		},
		getTrendCharTimeCropMovement(data) {
			let xData = data.map((item) => item.days);
			let yData = data.map((item) => item.timeCropMovement);
			setLineChart('mLinee1', this.$t('时间稼动率'), xData, yData);
		},
		// setLineChart('mLinee2', this.$t('性能开动率P'), xData, yData);
		// setLineChart('mLinee3', this.$t('合格品率1'), xData, yData);
		getHierarchy() {
			this.axios({
				method: 'get',
				url: '/basic/organization/findListByToken',
				params: {
					level: 3,
				},
			}).then((res) => {
				if (res.code == 200) {
					this.hierarchyList = this.getHierarchyByMachining(res.data);
				}
			});
		},
		getHierarchyByMachining(arr) {
			arr.forEach((item) => {
				item['value'] = item.code;
				item['label'] = item.name;
				if (item.children.length > 0) {
					this.getHierarchyByMachining(item.children);
				}
			});
			return arr;
		},
		pushHierarchy(selectValue) {
			if (selectValue.length > 0) {
				this.searchParams.orgCode = selectValue[selectValue.length - 1];
			} else {
				this.searchParams.orgCode = '';
			}
		},
	},
};
</script>

<style scoped lang="scss">
.item-desc {
	font-size: 14px;
	font-weight: 400;
	color: #00142d;
	line-height: 20px;
}
.oeeRate {
	width: 100%;
	height: 600px;
}
.oeeMReate {
	width: 100%;
	height: 200px;
	// margin-bottom: 20px;
}
.oeeLine {
	width: 100%;
	height: 200px;
}
</style>

<style lang="scss">
.orgchart .node.focused,
.orgchart .node:hover {
	background-color: #fff;
}
.orgchart .node .content {
	height: 60px;
	white-space: break-spaces;
	display: flex;
	justify-content: center;
	align-items: center;
}
.orgchart .node {
	width: 150px;
}
</style>
